<template>
  <by-background background="linear-gradient(180deg, #FF8330, #FFCE58, #FFE773)">
    <view class="flex-row flex-center padding-top-70">
      <image src="/static/enter-background.png" class="enter-background" />
    </view>
  </by-background>

  <by-navigation-bar title="技师入驻" color="#ffffff" background="transparent" />

  <view class="page flex-column flex-center padding-lr-30">
    <text class="text-52 color-white text-bold margin-bottom-50">欢迎入驻 技师之家</text>

    <view class="flex-row align-center justify-between width-full padding-lr-100 margin-bottom-64">
      <view v-for="(item,index) in greatList" :key="index" class="flex-row align-center">
        <image src="/static/right-decorate.png" class="right-decorate margin-right-10" />
        <text class="text-24 color-white">{{ item }}</text>
      </view>
    </view>

    <view class="content width-full flex-item bg-white relative padding-top-40">
      <view class="enter-title flex-row flex-center">
        <text class="text-30 color-white text-bold">入 驻 申 请 表</text>
      </view>

      <view class="padding-lr-30 padding-bottom-180">
        <by-cell
          v-for="(item,index) in formList"
          v-model="form[item.value]"
          :key="index"
          :label="item.label"
          :placeholder="`请输入${item.label}`"
          :type="item.type"
          :showArrow="item.type === 'page'"
          border
          @click="toPage(item.type)"
        >
          <template v-if="item.type === 'radio' || item.type === 'page'" #default>
            <view v-if="item.type === 'radio'" class="flex-row align-center">
              <view class="margin-right-30">
                <by-radius :model-value="form.gender === 0" label="男" @click="form.gender = 0" />
              </view>
              <by-radius :model-value="form.gender === 1" label="女" @click="form.gender = 1" />
            </view>
            <view v-else />
          </template>
        </by-cell>
        <view class="flex-column margin-top-30">
          <text class="text-30 color-t1">上传本人近期照({{total}}/1)</text>

          <view class="margin-top-90">
            <by-upload v-model="form.photoUrl" :count="1" @change="total = $event.total"/>
          </view>
        </view>
      </view>

      <view class="bottom">
        <by-button height="78rpx" font-size="32rpx" bold text="提 交" @click="submit"/>
      </view>
    </view>
  </view>

  <by-upload-tip />
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { mobile } from '@/common/test'
import { applyToJoin } from '@/common/api'
import { jump, toast } from '@/common/util'

const userStore = useUserStore()
const greatList = [
  '海量用户',
  '时间自由',
  '无佣金抽成'
]

type formValue = 'name' | 'gender' | 'age' | 'place' | 'tel' | 'page'
interface IFormListItem{
  readonly label:string
  readonly value:formValue
  readonly type:'text' | 'number' | 'radio' | 'page'
}
const formList:IFormListItem[] = [
  { label: '姓名', value: 'name', type: 'text' },
  { label: '性别', value: 'gender', type: 'radio' },
  { label: '年龄', value: 'age', type: 'number' },
  { label: '所在区域', value: 'place', type: 'text' },
  { label: '手机号', value: 'tel', type: 'number' },
  { label: '实名认证', value: 'page', type: 'page' }
]

const total = ref(0)
const form = reactive({
  name: '',
  gender: 1,
  age: '',
  place: '',
  tel: '',
  photoUrl: '',
  page: '',
  ...userStore.location
})

let load = false
async function submit() {
  if (load) return

  for (let i = 0; i < formList.length; i++) {
    const item:IFormListItem = formList[i]
    const value:formValue = item.value
    if (item.type !== 'radio' && !form[value] && value !== 'page') {
      toast('请输入' + item.label)
      return
    }

    if (value === 'tel' && !mobile(form.tel)) {
      toast('手机号码不正确')
      return
    }
  }
  if (!userStore.realNameInfo.name) {
    toast('请输入实名认证信息')
    return
  }

  if (!form.photoUrl) {
    toast('请上传上传本人近期照')
    return
  }
  load = true
  setTimeout(() => {
    load = false
  }, 500)
  await applyToJoin(form)
  toast('已提交申请')
}

function toPage(type:formValue) {
  if (type === 'page') jump('/pages/approve/index?type=2')
}

</script>

<style scoped lang="scss">
@include setPadding(top, 70);

@include setPadding(lr, 100);

@include setMargin(bottom, 64);

@include setMargin(top, 90);

@include setPadding(bottom, 180);

.enter-background{
  width: 650rpx;
  height: 384rpx;
}

.page{
  width: 100%;
  @include position(absolute, 196rpx);

  .right-decorate{
    width: 22rpx;
    height: 22rpx;
  }

  .content{
    border-radius: 16rpx;

    .enter-title{
      width: 358rpx;
      height: 52rpx;
      background: url("/static/enter-title.png") no-repeat center;
      background-size: cover;
      @include position(absolute, -24rpx, $left: 50%);
      transform: translateX(-50%);
    }

    .bottom{
      @include position(absolute, $left:46rpx, $bottom:54rpx, $right: 46rpx);
    }

  }

}
</style>
